<template>
  <q-item>
    <q-item-section side>{{ label }}</q-item-section>
    <q-item-section class="text-right">{{
      mapPose !== {} ? mapPose.name : $t(am + "无点位")
    }}</q-item-section>
  </q-item>
  <q-item v-if="mapName && mapPose !== {}">
    <q-item-section side>{{ $t(am + "地图名称") }}</q-item-section>
    <q-item-section class="text-right">{{ mapData.name }}</q-item-section>
  </q-item>
  <q-item v-if="area && mapPose !== {} && mapPose.area">
    <q-item-section side>{{ $t(am + "点位区域") }}</q-item-section>
    <q-item-section class="text-right">{{ mapPose.area }}</q-item-section>
  </q-item>
</template>

<script>
import { useAPIStore } from "stores/api/index.js";
import { api } from "boot/axios.js";
import { onMounted, ref, onUnmounted, watch, computed } from "vue";
import { i18n } from "boot/i18n";

const t = i18n.global.t;
export default {
  name: "MapPoseInfo",
  props: {
    label: { type: String, default: t("amrControl.mapPoseInfo.目标导航点") },
    poseId: String,
    center: { type: Boolean, default: false },
    update: { type: Boolean, default: false },
    mapName: { type: Boolean, default: false },
    area: { type: Boolean, default: false },
  },
  setup(props) {
    const mapPose = ref({});

    function getMapPose() {
      if (["", null].includes(props.poseId)) return;
      if (props.center) {
        api
          .get(useAPIStore().mapUrl + "mapPose/id/" + props.poseId)
          .then((rs) => {
            mapPose.value = rs.data;
          });
      } else {
        api
          .get(useAPIStore().amrUrl + "map/pose/id/" + props.poseId)
          .then((rs) => {
            mapPose.value = rs.data;
          });
      }
    }

    const mapData = ref({});
    const mapId = computed(() => mapPose.value.mapID);
    watch(mapId, (value) => {
      if (!props.mapName) return;
      if (props.center) {
        api.get(useAPIStore().mapUrl + "map/id/simple/" + value).then((rs) => {
          mapData.value = rs.data;
        });
      } else {
        api.get(useAPIStore().amrUrl + "map/id/" + value).then((rs) => {
          mapData.value = rs.data;
        });
      }
    });

    onMounted(getMapPose);
    const timer = props.update ? setInterval(getMapPose, 1000) : null;
    onUnmounted(() => {
      clearInterval(timer);
    });

    return {
      am: "amrControl.mapPoseInfo.", // 用于多语言取值的简写,当前路由 加 当前组件首字母
      mapPose,
      mapData,
    };
  },
};
</script>
